<template>
  <div class="container">

    <div class="bgcvideo">
      <!-- autoplay 自动播放  loop循环播放  muted 声音 preload 预加载 -->
      <video
        autoplay
        loop
        muted
        preload
        style="width: 100%; height: 100%; object-fit: fill"
      >
        <source src="../../assets/video.mp4">
      </video>
    </div>

    <el-card>
      <template #header>
        <el-row style="text-align:center">
          <img src="../../assets/logo1.png" width="60%" alt="">
        </el-row>

      </template>
      <el-form>
        <el-form-item>
          <el-input v-model="loginForm.account">
            <template #prefix>
              <svg-icon icon-class="user" />
            </template>

          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.password" type="password">
            <template #prefix>
              <svg-icon icon-class="password" />
            </template>
            <template #suffix>
              <svg-icon icon-class="eye" />
            </template>

          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.code">
            <template #prefix>
              <img src="../../assets/icon-code.png" width="25px" alt="">
            </template>
            <template #suffix>
              <img :src="src" alt="" @click="getImgSrc">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="text-align:center;">
          <el-button style="width:80%" type="danger" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      src: '',
      loginForm: {
        key: '',
        account: 'demo',
        password: 'hm#qd@23!',
        code: ''
      }
    }
  },
  created() {
    this.getImgSrc()
  },
  methods: {

    getImgSrc() {
      this.loginForm.key = Math.ceil(Math.random() * 10000000)
      this.src = 'https://slwl-api.itheima.net/manager/captcha?key=' + this.loginForm.key
    },
    async login() {
      console.log(this.loginForm)
      await this.$store.dispatch('user/login', this.loginForm)
      this.$message.success('登陆成功')
      this.$router.push('/')
    }

  }
}
</script>

<style scoped lang='scss'>

.bgcvideo {
  width: 100%;
  height:calc(100vh - 40px);
  background-color: rgb(141, 130, 130);
  position: relative;
}

video {
  height: calc(100vh - 40px);
  background-size:100% 100%;
  width: 100%;
  position: absolute;
  filter: blur(3px);
  top: 0;
  left: 0;
}

.el-card {
  position: absolute;
  left: 40%;
  top: 30%;
  width:450px;
  height: 525px;
}
.container {
  width: 100vw;
  height: 100vh;
}
</style>
